<template>
  <div class="el-single-select">
    <el-dialog
      :close-on-click-modal="false"
      :title="dialogData.title"
      :visible.sync="dialogVisible"
      width="1000px"
    >
      <!-- 高级搜索 -->
      <div class="ccui-advanced-search-wrapper ccui-clearfix">
        <el-search
          :formProp="formData"
          @search="search"
          @change="change"
          :isShowSearch="true"
          :selectClear="true"
          class="ccui-highsearch no-print"
        >
          <template slot="search">
            <el-input
              v-for="(item, index) in dialogData.formData"
              :key="index"
              v-model="formData[item.model]"
              :searchLabel="item.searchLabel"
              :placeholder="item.placeholder"
              clearable
            />
          </template>
        </el-search>
      </div>
      <!-- table表格 -->
      <div class="ccui-multifunctional-table-wrapper">
        <el-table
          :data="dialogData.tableData"
          :fit="true"
          border
          class="ccui-multifunctional-table"
          ref="tableDialog"
        >
          <template v-for="(table, index) in dialogData.tableTheadOptions">
            <el-table-column
              :fixed="table.fixed || false"
              :key="index"
              :type="table.type"
              :label="table.label"
              :min-width="table.width"
              :prop="table.prop"
              :align="table.align || 'left'"
              :header-align="table.headerAlign || 'left'"
              :filters="table.filters"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </template>

          <el-table-column label="操作" width="80">
            <template slot-scope="{ row }">
              <el-button size="mini" type="text" @click="getSure(row)"
                >选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ccui-table-footer" v-show="dialogData.tableData.length > 0">
          <div id="ccui-paging">
            <el-pagination
              :total="dialogData.pagination.totalNum"
              :page-size="dialogData.pagination.pageSizeCode"
              :current-page="dialogData.pagination.pageNoCode"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button
              class="ccui-pagination-btn"
              size="mini"
              type="default"
              @click="handleSizeChange('none')"
              >确定
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "chooseRedioDialog",
  props: {
    dialogData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {},
      dialogVisible: false
    };
  },
  methods: {
    getSure(row) {
      this.$bus.$emit("getSure", row);
      this.dialogVisible = false;
    },
    search(val) {
      this.$emit("search", this.formData);
    },
    change(val) {
      this.$emit("change", this.formData);
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .el-searchs-box {
  width: 420px !important;
}

/deep/ .el-table__empty-text {
  width: 60px !important;
}

/deep/ .ccui-multifunctional-table-wrapper {
  margin-top: 0px;
}

/deep/ .el-dialog {
  width: 1130px !important;
}

/deep/ .el-table__body-wrapper {
  max-height: 368px;
  overflow: auto;
}
</style>
